<!DOCTYPE html>
<html>
<head>
<!--
在这个示例代码中，我们定义了一个叫做EventUtil的对象，里面封装了addHandler和removeHandler两个方法，用于绑定和解绑事件。
这两个方法会根据浏览器的不同，使用不同的事件模型进行兼容处理，保证在各个浏览器下都能正常工作。

我们还定义了一个clickHandler事件处理函数，在点击按钮时会弹出一个消息框。在HTML中，我们使用onclick属性来触发bindEvent和unbindEvent两个函数。
当我们点击“绑定事件”按钮时，bindEvent函数将被调用，它将使用EventUtil.addHandler方法来绑定按钮的点击事件。当我们点击“解绑事件”按钮时，unbindEvent函数将被调用，它将使用EventUtil.removeHandler方法来解绑按钮的点击事件。

这个示例代码实现了一个简单的跨浏览器事件工具，可以在不同浏览器下正常工作。当然，实际的跨浏览器事件工具需要考虑到更多的细节和兼容性问题，这里只是提供一个简单的示例代码供参考。
-->
    <title>跨浏览器事件工具示例</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        var EventUtil = {
            addHandler: function(element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else if (element.attachEvent) { //? 这是IE浏览器用的addEventListener
                    element.attachEvent("on" + type, handler);
                } else {
                    element["on" + type] = handler;
                }
            },
            removeHandler: function(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                } else {
                    element["on" + type] = null;
                }
            }
        };
        function clickHandler(event) {
            alert("按钮被点击了");
        }
        function bindEvent() {
            var btn = document.getElementById("myButton");
            EventUtil.addHandler(btn, "click", clickHandler);
        }
        function unbindEvent() {
            var btn = document.getElementById("myButton");
            EventUtil.removeHandler(btn, "click", clickHandler);
        }
    </script>
</head>
<body>
<button id="myButton" onclick="bindEvent()">绑定事件</button>
<button id="myButton2" onclick="unbindEvent()">解绑事件</button>
</body>
</html>
